<template>
  <section>
    <div class="flex flex-col">
      <div class="flex flex-col font-common user-info-wrapper">
        <div class="flex flex-row flex-right pd10">
          <i class="iconfont icon-set" style="font-size: 30px;" @click="$router.push({name: 'MySettingIndex'})" />
        </div>

        <div class="flex flex-row flex-center mb10">
          <div class="flex flex-row flex-center pr10 pl20">
            <template v-if="user">
              <img :src="user.avatar_url ? user.avatar_url : STATIC_BASE_URL + 'images/mp/avatar.jpeg'" class="avatar" />
            </template>
            <template v-else>
              <img :src="STATIC_BASE_URL + 'images/mp/avatar.jpeg'" class="avatar" @click="$router.push({name: 'UserLogin'})" />
            </template>
          </div>

          <div class="flex flex-col flex-1">
            <div class="flex flex-row flex-left flex-bottom">
              <template v-if="member">
                <i class="iconfont icon-nan" style="color: #ff89b5;" v-if="member.gender==1"></i>
                <i class="iconfont icon-nv" style="color: #ff89b5;" v-else-if="member.gender==2"></i>
                <span class="font-large strong ml5">{{user.nick}}</span>
                <span class="ml5">({{member.vip_level_str}})</span>
              </template>
              <template v-else>
                <span class="font-large strong ml5" @click="$router.push({name: 'UserLogin'})">点击登录</span>
              </template>
            </div>

            <div class="flex flex-row flex-left mt5" v-if="member">
              资料完善度:{{member ? member.perfection_degree : 0}}%<span @click="$router.push({name: 'MyProfileIndex'})"><i class="iconfont icon-bianji ml15"></i>编辑</span>
            </div>
          </div>

          <div class="flex flex-row flex-center">
            <div class="invite-button" @click="showSharePosterPopup">邀请单身</div>
          </div>
        </div>

        <div class="flex flex-row mt10">
<!--          <div class="flex flex-col flex-1 flex-center" @click="$router.push({name: 'MyFriendsIndex'})">-->
<!--            <div class="flex flex-row flex-center">-->
<!--              <i class="iconfont icon-jiahaoyou" style="font-size: 30px;" />-->
<!--            </div>-->
<!--            <div class="flex flex-row flex-center mt10">-->
<!--              我的好友-->
<!--            </div>-->
<!--          </div>-->

          <div class="flex flex-col flex-1 flex-center" @click="$router.push({name: 'MyVisitorIndex'})">
            <div class="flex flex-row flex-center">
              <i class="iconfont icon-fangkeshu" style="font-size: 30px;" />
            </div>
            <div class="flex flex-row flex-center mt10">
              我的访客
            </div>
          </div>

          <div class="flex flex-col flex-1 flex-center" @click="$router.push({name: 'MyFollowIndex'})">
            <div class="flex flex-row flex-center">
              <i class="iconfont icon-xihuan" style="font-size: 30px;" />
            </div>
            <div class="flex flex-row flex-center mt10">
              我的关注
            </div>
          </div>

          <div class="flex flex-col flex-1 flex-center" @click="$router.push({name: 'MyMatchmakerIndex'})">
            <div class="flex flex-row flex-center">
              <i class="iconfont icon-tuiguang" style="font-size: 30px;" />
            </div>
            <div class="flex flex-row flex-center mt10">
              我的推广
            </div>
          </div>

          <div class="flex flex-col flex-1 flex-center" @click="servicePopupVisible=true">
            <div class="flex flex-row flex-center">
              <i class="iconfont icon-hongniang-copy" style="font-size: 30px;" />
            </div>
            <div class="flex flex-row flex-center mt10">
              红娘服务
            </div>
          </div>
        </div>
      </div>

      <div style="margin-top: -30px; padding: 10px 10px 0 10px;">
        <div class="round-box bg-color-white flex flex-col pb10">
          <div class="flex flex-row flex-centerV pd20">
            <div class="flex flex-row flex-left flex-1 font-common">
              每天登录签到获得额外惊喜
            </div>

            <div class="flex flex-row flex-right">
              <van-button plain round size="small" color="#ff7453" @click="checkIn" :disabled="checkedIn"><span v-if="checkedIn">今日已签到</span><span v-else>立即签到</span></van-button>
            </div>
          </div>

          <div class="flex flex-row flex-centerV font-biger">
            <div class="flex flex-col flex-1" @click="$router.push({name: 'MyWalletIndex'})">
              <div class="flex flex-row flex-center">金币</div>
              <div class="flex flex-row flex-center mt10 strong">{{walletAccount ? walletAccount.gold_coin : 0}}</div>
            </div>

            <div class="flex flex-col flex-1" @click="$router.push({name: 'MyWalletIndex'})">
              <div class="flex flex-row flex-center">钱包</div>
              <div class="flex flex-row flex-center mt10"><span class="strong">{{walletAccount ? walletAccount.balance : 0}}</span><span class="font-common ml10">元</span></div>
            </div>

            <div class="flex flex-col flex-1" @click="$router.push({name: 'MatchmakerIndex'})">
              <div class="flex flex-row flex-center">推广收益</div>
              <div class="flex flex-row flex-center mt10"><span class="strong">{{matchmakerStatistic ? matchmakerStatistic.salary.all : 0.00}}</span><span class="font-common ml10">元</span></div>
            </div>

          </div>
        </div>
      </div>
    </div>

    <div class="pd10">
      <div class="flex flex-row flex-centerV pd10 bg-color-white round-box" @click="$router.push({name: 'MyAuthIndex'})">
        <div class="flex flex-row font-common pr10">
          诚信认证
        </div>
        <div class="flex flex-row flex-left flex-1 auth-info">
          <div class="flex flex-row flex-center circle-badge mr5"
               v-bind:class="{active: (member && member.realname_auth_status==1 ? true : false)}">
            <i class="iconfont icon-credentials_icon"/>
          </div>

          <div class="flex flex-row flex-center circle-badge mr5 active">
            <i class="iconfont icon-dianhua13"/>
          </div>

          <div class="flex flex-row flex-center circle-badge mr5"
               v-bind:class="{active: (member && member.education_auth_status==1 ? true : false)}">
            <i class="iconfont icon-xueli"/>
          </div>

          <div class="flex flex-row flex-center circle-badge mr5"
               v-bind:class="{active: (member && member.house_auth_status==1 ? true : false)}">
            <i class="iconfont icon-fangzi"/>
          </div>

          <div class="flex flex-row flex-center circle-badge mr5"
               v-bind:class="{active: (member && member.car_auth_status==1 ? true : false)}">
            <i class="iconfont icon-chezi"/>
          </div>

          <div class="flex flex-row flex-center circle-badge mr5"
               v-bind:class="{active: (member && member.marriage_auth_status==1 ? true : false)}">
            <i class="iconfont icon-jiehun1"/>
          </div>

          <div class="flex flex-row flex-center circle-badge mr5"
               v-bind:class="{active: (member && member.wxid_auth_status==1 ? true : false)}">
            <i class="iconfont icon-weixin"/>
          </div>
        </div>
        <div class="flex flex-row">
          <i class="iconfont icon-right-arrow" />
        </div>
      </div>

      <div class="flex flex-col pt20 pb20 pl10 pr10 bg-color-white round-box mt10">
        <div class="flex flex-row flex-centerV pb20 border-bottom-gray font-common" @click="$router.push({name: 'VipBuy'})">
          <div class="flex flex-row pr10">
            <i class="iconfont icon-viphuiyuanhuangguan" style="font-size: 20px; color: #fcb63a;" />
          </div>

          <div class="flex flex-row flex-left flex-1">
            vip会员
          </div>

          <div class="flex flex-row">
            <i class="iconfont icon-right-arrow" />
          </div>
        </div>

        <div class="flex flex-row flex-centerV pt20 pb20 border-bottom-gray font-common" @click="$router.push({name: 'MyFollowIndex', query: {type: 'others'}})">
          <div class="flex flex-row pr10">
            <i class="iconfont icon-xihuan" style="font-size: 20px; color: #ff4400;" />
          </div>

          <div class="flex flex-row flex-left flex-1">
            谁关注我
          </div>

          <div class="flex flex-row">
            <i class="iconfont icon-right-arrow" />
          </div>
        </div>

        <div class="flex flex-row flex-centerV pt20 pb20 border-bottom-gray font-common" @click="$router.push({name: 'MyMemberProfileApplyList'})">
          <div class="flex flex-row pr10">
            <i class="iconfont icon-zhenghunjiaoyou" style="font-size: 20px; color: #6600cc;" />
          </div>

          <div class="flex flex-row flex-left flex-1">
            交友申请
          </div>

          <div class="flex flex-row">
            <i class="iconfont icon-right-arrow" />
          </div>
        </div>

        <div class="flex flex-row flex-centerV pt20 pb20 border-bottom-gray font-common" @click="$router.push({name: 'MyAlbumIndex'})">
          <div class="flex flex-row pr10">
            <i class="iconfont icon-xiangce" style="font-size: 20px; color: #13ca87;" />
          </div>

          <div class="flex flex-row flex-left flex-1">
            我的相册
          </div>

          <div class="flex flex-row">
            <i class="iconfont icon-right-arrow" />
          </div>
        </div>

        <div class="flex flex-row flex-centerV pt20 pb20 border-bottom-gray font-common" @click="$router.push({name: 'MyActivityIndex'})">
          <div class="flex flex-row pr10">
            <i class="iconfont icon-nav_activity" style="font-size: 20px; color: #40afff;" />
          </div>

          <div class="flex flex-row flex-left flex-1">
            我的活动
          </div>

          <div class="flex flex-row">
            <i class="iconfont icon-right-arrow" />
          </div>
        </div>

        <div class="flex flex-row flex-centerV pt20 pb20 border-bottom-gray font-common" @click="$router.push({name: 'MyCourseIndex'})">
          <div class="flex flex-row pr10">
            <i class="iconfont icon-xinrenkecheng" style="font-size: 16px; color: #ff7453;" />
          </div>

          <div class="flex flex-row flex-left flex-1">
            我的课程
          </div>

          <div class="flex flex-row">
            <i class="iconfont icon-right-arrow" />
          </div>
        </div>

        <div class="flex flex-row flex-centerV pt20 pb20 border-bottom-gray font-common" @click="$router.push({name: 'MyServiceIndex'})">
          <div class="flex flex-row pr10">
            <i class="iconfont icon-hongniang-copy" style="font-size: 16px; color: #ff7453;" />
          </div>

          <div class="flex flex-row flex-left flex-1">
            我的服务
          </div>

          <div class="flex flex-row">
            <i class="iconfont icon-right-arrow" />
          </div>
        </div>

        <div class="flex flex-row flex-centerV pt20 font-common" @click="$router.push({name: 'VipcardIndex'})">
          <div class="flex flex-row pr10">
            <i class="iconfont icon-huiyuanka" style="font-size: 16px; color: #c65edb;" />
          </div>

          <div class="flex flex-row flex-left flex-1">
            会员卡
          </div>

          <div class="flex flex-row">
            <i class="iconfont icon-right-arrow" />
          </div>
        </div>

      </div>

      <div class="flex flex-row flex-centerV pd10 bg-color-white round-box mt10">
        <div class="flex flex-row flex-1 font-common">
          推广收益 ￥<span class="color-red">{{matchmakerStatistic ? matchmakerStatistic.salary.all : 0.00}}</span>
        </div>

        <div class="flex flex-row">
          <van-button plain round size="small" color="#ff7453" @click="$router.push({name: 'MatchmakerIndex'})">立即推广</van-button>
        </div>
      </div>

      <div class="mt10" @click="$router.push({name: 'MatchmakerIndex'})">
        <img :src="STATIC_BASE_URL + 'images/mp/tg.jpg'" class="w100" />
      </div>

      <div class="flex flex-col pt20 pb20 pl10 pr10 bg-color-white round-box mt10">
        <div class="flex flex-row flex-centerV pb20 border-bottom-gray font-common" @click="gotoFeedBack">
          <div class="flex flex-row pr10">
            <i class="iconfont icon-liuyan" style="font-size: 20px; color: #fcb63a;" />
          </div>

          <div class="flex flex-row flex-left flex-1">留言反馈</div>

          <div class="flex flex-row">
            <i class="iconfont icon-right-arrow" />
          </div>
        </div>

        <div class="flex flex-row flex-centerV pt20 font-common" @click="gotoFeedBack">
          <div class="flex flex-row pr10">
            <i class="iconfont icon-zhiyin" style="font-size: 20px; color: #6bacff;" />
          </div>

          <div class="flex flex-row flex-left flex-1">新手指引</div>

          <div class="flex flex-row">
            <i class="iconfont icon-right-arrow" />
          </div>
        </div>
      </div>

      <div class="flex flex-col pt20 pb20 pl10 pr10 bg-color-white round-box mt10" v-if="member">
        <div class="flex flex-row flex-1 flex-centerV font-common" @click="logout">
          <div class="flex flex-row flex-left flex-1">
            退出登录
          </div>

          <div class="flex flex-row">
            <i class="iconfont icon-right-arrow" />
          </div>
        </div>
      </div>

      <div class="text-center pd10 font-common">
        <router-link :to="{name: 'TermsConditions'}" class="blue mr10">&lt;&lt;用户协议&gt;&gt;</router-link><router-link :to="{name: 'PrivacyPolicy'}" class="blue">&lt;&lt;隐私政策&gt;&gt;</router-link>
      </div>
    </div>

    <div class="empty-box"></div>
    <Tabbar active="my"/>

    <van-popup v-model="servicePopupVisible" :style="{ width: '60%' }">
      <div class="text-center mt10">
        {{ APP_NAME }}客服
      </div>

      <div class="text-center mt10">
        <img :src="STATIC_BASE_URL + 'images/mp/service-wx.jpg'" height="200" width="200"/>
      </div>

      <div class="text-center mt5 mb20 font-big">
        长按二维码添加客服为您牵线
      </div>
    </van-popup>

    <van-overlay :show="sharePosterPopupVisible">
      <div class="flex flex-col flex-center" style="height: 100%;">
        <div class="flex flex-col pd10 bg-color-white round-box" style="width: 60%;">
          <div class="flex flex-row flex-center">
            <img :src="sharePosterImg" class="w100" v-if="sharePosterImg" />
            <van-empty
              class="custom-image"
              :image="STATIC_BASE_URL + 'images/mp/loading.gif'"
              v-else
            />
          </div>
          <div class="flex flex-row flex-center text-center mt5 font-common">长按图片发给好友或保存到本地后发到朋友圈</div>
        </div>

        <div class="flex flex-row flex-center pd10">
          <i class="iconfont icon-guanbi" style="font-size: 34px; color: #FFFFFF;" @click="sharePosterPopupVisible=false" />
        </div>
      </div>
    </van-overlay>

    <van-overlay :show="checkInRewardsOverlayVisible">
      <div class="flex flex-col flex-center" style="height: 100%;">
        <div class="flex flex-col pd20 round-box bg-color-white" style="width: 60%;">
          <div class="flex flex-row flex-center pb20 font-larger color-orange">签到成功</div>

          <div class="flex flex-row flex-center">
            <img :src="STATIC_BASE_URL + 'images/mp/reward.png'" width="80%" />
          </div>
          <div class="flex flex-row flex-center pt20 font-biger">
            恭喜你！获得<span class="color-red">{{checkInRewards}}</span>金币奖励！
          </div>
        </div>

        <div class="flex flex-row flex-center pd20">
          <i class="iconfont icon-guanbi" style="font-size: 34px; color: #FFFFFF;" @click="checkInRewardsOverlayVisible=false" />
        </div>
      </div>
    </van-overlay>
  </section>
</template>

<script>
import {
  memberCheckInUri,
  memberMyCheckInUri,
  memberMySharePosterUri, myMatchmakerStatisticUri, myWalletAccountUri,
  STATIC_BASE_URL,
  userLogoutUri
} from "../../common/api";
  import Tabbar from '../componets/Tabbar';
  import Vue from 'vue';
  import {Cell, CellGroup, Button, Toast, Overlay, Empty} from 'vant';
  Vue.use(Cell).use(CellGroup).use(Button).use(Toast).use(Overlay).use(Empty);

  export default {
    components: {
      Tabbar: Tabbar
    },
    data() {
      return {
        APP_NAME: APP_NAME,
        STATIC_BASE_URL: STATIC_BASE_URL,
        member: null,
        user: null,
        matchmakerStatistic: null,
        checkInRewards: 0,
        checkInRewardsOverlayVisible: false,
        checkedIn: false,
        sharePosterPopupVisible: false,
        sharePosterImg: null,
        walletAccount: null,

        servicePopupVisible: false
      }
    },
    methods: {
      gotoFeedBack() {
        window.location.href = 'https://support.qq.com/products/313724';
      },
      checkIn() {
        const that = this;
        if(!that.GLOBAL.userInfo) {
          this.$router.push({name: 'UserLogin'});
          return;
        }
        const url = memberCheckInUri;
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            Toast(msg);
          } else {
            that.user.gold_coin = data.gold_coin;
            that.GLOBAL.userInfo.gold_coin = data.gold_coin;
            that.checkInRewards = data.reward_gold_coin;
            that.checkInRewardsOverlayVisible = true;
            that.checkedIn = true;
            that.myWalletAccount();
          }
        }, response => {
          // error callback
        })
      },
      myCheckIn() {
        const that = this;
        const url = memberMyCheckInUri;
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            Toast(msg);
          } else {
            that.checkedIn = data.checked;
          }
        }, response => {
          // error callback
        })
      },
      myWalletAccount() {
        const that = this;
        const url = myWalletAccountUri;
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            Toast(msg);
          } else {
            that.walletAccount = data;
          }
        }, response => {
          // error callback
        })
      },
      showSharePosterPopup() {
        this.sharePosterPopupVisible = true;
        const that = this;
        const url = memberMySharePosterUri;
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            Toast(msg);
          } else {
            that.sharePosterImg = data.url;
          }
        }, response => {
          // error callback
        })
      },
      getMatchmakerStatistic() {
        const that = this;
        const url = myMatchmakerStatisticUri;
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            that.toast(msg);
          } else {
            that.matchmakerStatistic = data;
          }
        }, response => {
          // error callback
        })
      },
      logout() {
        const that = this;
        const url = userLogoutUri;
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body

          that.member = null;
          that.user = null;
          that.matchmakerStatistic = null;
          that.walletAccount = null;

          that.EventBus.$emit('OnUserLogout');

          that.toast.success('退出成功');
        }, response => {
          // error callback
        })
      }
    },
    mounted: function () {
      if (this.GLOBAL.userInfo) {
        this.member = this.GLOBAL.memberProfile;
        this.user = this.GLOBAL.userInfo;

        this.getMatchmakerStatistic();
        this.myCheckIn();
        this.myWalletAccount();
      }

      this.EventBus.$on('OnUserLogined', (data) => {
        this.member = this.GLOBAL.memberProfile;
        this.user = this.GLOBAL.userInfo;

        this.getMatchmakerStatistic();
        this.myCheckIn();
        this.myWalletAccount();
      });

      this.EventBus.$on('OnMemberAuth', () => {
        this.member = this.GLOBAL.memberProfile;
      });
    }
  }
</script>

<style scoped>
  .user-info-wrapper {
    background: #6600CC;
    color: #FFFFFF;
    padding-bottom: 40px;
  }
  .user-info-wrapper .avatar {
    height: 60px;
    width: 60px;
    border-radius: 30px;
  }
  .user-info-wrapper .invite-button {
    height: 40px;
    line-height: 40px;
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
    padding-left: 20px;
    padding-right: 10px;
    color: #6600CC;
    background: #FFFFFF;
  }

  .auth-info .circle-badge {
    height: 26px;
    width: 26px;
    border-radius: 13px;
    background: #e0e0e0;
    color: #FFFFFF;
  }

  .auth-info .circle-badge.active {
    background: #25bdd6;
  }

  .empty-box {
    height: calc(40px + env(safe-area-inset-bottom));
  }

  .custom-image .van-empty__image {
    width: 100px;
    height: 100px;
  }
</style>
